<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '阅读记录',
	},
}
</route>

<template>
	<view class="page-bookrack">
		<fly-navbar backgroundColor="#F6F6F6" leftText="阅读记录" fixed />
		<view class="w-full flex flex-col box-border" :style="{ height: contentHeight + 'rpx' }">
			<view class="w-full px-4 h-[128rpx] box-border flex justify-between items-center">
				<view
					class="text-[36rpx] w-[50%] text-center relative font-bold"
					:style="{ color: tabKey === item.type ? '#34A4E2' : '#303030' }"
					@tap="changeTab(item.type)"
					v-for="item in tabList"
					:key="item.type"
				>
					{{ item.des }}<text class="text-[24rpx] font-bold">({{ item.count }})</text>
					<text
						v-if="tabKey === item.type"
						class="w-[29rpx] h-[10rpx] rounded-[5rpx] absolute left-[50%] -translate-x-[50%] -bottom-[10rpx]"
						style="background: #34a4e2"
					></text>
				</view>
			</view>
			<view class="w-full flex-1 pb-3 box-border" style="height: calc(100% - 128rpx)">
				<scroll-view
					class="w-full h-full"
					scroll-y
					v-if="thisPage === 1 && bookList.length"
					@scrolltolower="scrolltolower"
				>
					<view
						class="w-full px-4 box-border mb-3 last:mb-0"
						v-for="item in bookList"
						:key="item.book_id"
						@tap="toDetails(item.book_id)"
					>
						<view
							class="bg-white rounded-[30rpx] px-3 py-4 box-border flex justify-between items-center"
						>
							<image class="w-[212rpx] h-[250rpx] rounded-[30rpx]" :src="item.cover_img"></image>
							<view class="flex-1 pl-2 py-2 h-[250rpx] box-border flex flex-col justify-between">
								<view class="w-full flex flex-col">
									<text class="text-[33rpx] font-bold text-[#303030]">{{ item.name }}</text>
									<text class="text-[22rpx] text-[#303030] mt-1">{{ item.author }}</text>
									<rich-text
										class="text-[22rpx] text-[#919191] mt-1 line-clamp-2"
										:nodes="item.descript"
									></rich-text>
								</view>
								<view class="w-full flex justify-end items-center" v-if="item.plan_progress === 0">
									<view
										class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-4 flex justify-center items-center"
										:style="{ background: '#2BA5E0' }"
										>开始学习</view
									>
								</view>
								<view
									class="w-full flex justify-between items-center"
									v-if="item.plan_progress > 0 && item.plan_progress < 100"
								>
									<view class="flex items-center">
										<image
											class="w-[50rpx] h-[50rpx] rounded-[50%] mr-1"
											:src="userInfo.avatar || baseImg + '/user-default.png'"
										></image>
										<view class="w-[153rpx] flex flex-col items-center justify-center">
											<text class="text-[#48C855] text-[21rpx]"
												>学习进度{{ item.plan_progress }}%</text
											>
											<view
												class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
												:style="{ background: '#F2F0F3' }"
											>
												<view
													class="h-full absolute top-0 left-0 rounded-tl-[5rpx] rounded-bl-[5rpx]"
													:style="{ background: '#48C855', width: item.plan_progress + '%' }"
												></view>
											</view>
										</view>
									</view>
									<view
										class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-4 flex justify-center items-center"
										:style="{ background: '#48C855' }"
										>继续学习</view
									>
								</view>
								<view
									class="w-full flex justify-between items-center"
									v-if="item.plan_progress === 100"
								>
									<view class="flex items-center">
										<image
											class="w-[50rpx] h-[50rpx] rounded-[50%] mr-1"
											:src="userInfo.avatar || baseImg + '/user-default.png'"
										></image>
										<view class="w-[153rpx] flex flex-col items-center justify-center">
											<text class="text-[#F1BF10] text-[21rpx]">已学完100%</text>
											<view
												class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
												:style="{ background: '#F2F0F3' }"
											>
												<view
													class="h-full absolute top-0 left-0 w-full rounded-[5rpx]"
													:style="{ background: '#F1BF10' }"
												></view>
											</view>
										</view>
									</view>
									<view
										class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-4 flex justify-center items-center"
										:style="{ background: '#F1BF10' }"
										>再次学习</view
									>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<no-page
					v-if="thisPage === 0 || (thisPage === 1 && !bookList.length)"
					height="100%"
					:type="thisPage === 0 ? 'btn' : 'msg'"
					:title="title"
					@click="retry"
				></no-page>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { systemInfo } from '@/utils/getSystemInfo';
import { useUserStore } from '@/store';
import { getReadStatistics, getReadRecordList } from '@/service/user';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const { contentHeight } = systemInfo();
const tabList = ref([]);
const tabKey = ref(1); // over
const bookList = ref([]);
const title = ref('');
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const hasMore = ref(true);

onShow(() => {
	getRecordStatistics();
	getList();
});

const changeTab = (key: number) => {
	hasMore.value = true;
	bookList.value = [];
	page.value.number = 1;
	tabKey.value = key;
	getList();
};

const getRecordStatistics = async () => {
	const res = await getReadStatistics(userInfo.value.student_id);
	if (res.status_code === 200 && res.data) {
		tabList.value = res.data;
	}
};

const scrolltolower = () => {
	if (!hasMore.value) return;
	page.value.number++;
	getList();
};

const getList = async () => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getReadRecordList({
			student_id: userInfo.value.student_id,
			type: tabKey.value,
			page: page.value.number,
			page_size: page.value.size,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			bookList.value = page.value.number === 1 ? res.data : [...bookList.value, ...res.data];
			if (res.data.length < page.value.size) {
				hasMore.value = false;
			}
			if (!bookList.value.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};

const toDetails = (id: number) => {
	if (!id) return;
	uni.navigateTo({
		url: `/pages-book/details/index?id=${id}`,
	});
};

const retry = () => {
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}
</style>
